<template>
	<view class="/">
		<view class="order-header">
			<view class="search"><uni-search-bar placeholder="请输入订单号/商品名称" cancelText="搜索" :radius="100" @cancel="onSearch" @confirm="onSearch" @input="onInput"></uni-search-bar></view>
			<view class="">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#E9444A" @clickItem="onClickItem"></uni-segmented-control>
			</view>
		</view>
		<view style="height: 90px;"></view>
		<view class="order-main"><shopList :shop-list="list" @details="shopDetails"></shopList></view>
		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中...</text>
			</block>
		</view>
		<without v-if="!isLoading" :showImg="isIcon"  :icon="icon" :tip="tip"></without>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import shopList from '@/components/shop-list.vue';
import without from '@/components/without.vue';
import { distributeOrder } from '@/mixins/index.js';
import { store } from '@/store/index.js';
export default {
	mixins: [distributeOrder],
	components: { uniSearchBar, uniSegmentedControl, shopList, without },
	data() {
		return {
			items: ['全部', '已结算', '待结算'],
			current: 0,
			list: [],
			page: 1,
			limit: 10,
			tip: '',
			isLoading: true,
			isIcon: true,
			nextPage: false,
			count: '',
			icon:""
		};
	},
	async mounted() {
		await this.$onLaunched;
		this.getDistributionOrder();
		this.icon = this.$store.image_header + 'without.png'
	},

	computed: {
		distributor() {
			return store && store.distributor_id;
		}
	},
	watch: {
		search(n, o) {
			if (!n && o) {
				this.page = 1;
				this.list = [];
				this.getDistributionOrder();
			}
		}
	},
	methods: {
		onClickItem(e) {
			console.log(e, 'e.currentIndex');
			// 3 全部 0 未结算  1已结算
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
			this.page = 1;
			this.list = [];
			switch (e.text) {
				case '全部':
					//status = 3;
					this.getDistributionOrder({ orderState: 3 });
					break;
				case '待结算':
					//status = 0;
					this.getDistributionOrder({ orderState: 0 });
					break;
				case '已结算':
					//status = 1;
					this.getDistributionOrder({ orderState: 1 });
					break;
			}
		},
		copy(data) {
			uni.setClipboardData({
				data: data
			});
		},

		shopDetails(id) {
			let distributor_id = this.distributor;
			uni.navigateTo({
				url: '/pages/product/details/details?id=' + id + '&distributor_id=' + distributor_id
			});
		},

		// 搜索
		onSearch() {
			console.log(this.search);
			if (!this.search) return;
			let search = this.search;
			this.page = 1;
			this.list = [];
			switch (this.current) {
				case 0: // 全部
					this.getDistributionOrder({ orderState: 3, search });
					break;
				case 1: // 已结算
					this.getDistributionOrder({ orderState: 1, search });
					break;
				case 2: // 待结算
					this.getDistributionOrder({ orderState: 0, search });
					break;
			}
		},

		//
		onInput(e) {
			this.search = e.value;
		}
	},

	//触底加载更多
	onReachBottom() {
		if (this.count > this.list.length) {
			this.isLoading = true;
			this.page++;
			switch (this.current) {
				case 0: // 全部
					this.getDistributionOrder({ orderState: 3 });
					break;
				case 1: // 已结算
					this.getDistributionOrder({ orderState: 1 });
					break;
				case 2: // 待结算
					this.getDistributionOrder({ orderState: 0 });
					break;
			}
			// this.getDistributionOrder();
			console.log('触底加载更多');
		} else {
			this.tip = '已加载全部';
			this.isLoading = false;
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	background-color: #f6f6f6;
}
.order-main {
	margin: 15rpx 25rpx;
}
.order-header {
	background: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
.search {
	background-color: #fff;
}
</style>
